<template>
  <div class="main_box">
    <el-row>
      <el-col :span="12">
        <div class="opration_wrap">
          <el-button type="primary" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="add_wrap">
      <div class="tit">
        <h2>项目信息</h2>
      </div>
      <el-form :model="appointForm" ref="appointForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-table :data="appointItemList" style="width: 100%;margin-top:10px" ref="multipleTable">
            <el-table-column width="150px" label="项目分类">
              <template slot-scope="scope">
                <el-cascader clearable :options="pickClassifyList"
                             :props="{ expandTrigger: 'hover' }"
                             class="filter-item"  style="width: 200px" v-model="scope.row.classifyIdList"
                             placeholder="请选择分类" filterable @change="classifyChange">
                </el-cascader>
              </template>
            </el-table-column>
          <el-form-item label="项目分类" prop="classifyIdList">

          </el-form-item>

          <el-form-item label="医检机构" prop="institutionId">
            <el-select
              v-model="appointForm.institutionId"
              clearable
              reserve-keyword
              :loading="loadingIns"
              placeholder="请选择医检机构"
              @change="institutionChange"
            >
              <el-option
                v-for="item in pickInstitutionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          </el-table>
        </el-row>

        <div class="tit">
          <h2>患者信息</h2>
        </div>
        <el-row>
          <el-table :data="appointItemList" style="width: 100%;margin-top:10px" ref="multipleTable">
            <el-table-column width="150px" label="条码号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.reportCode"></el-input>
              </template>
            </el-table-column>
            <el-table-column width="150px" label="患者姓名">
              <template slot-scope="scope">
                <el-input v-model="scope.row.patientName"></el-input>
              </template>
            </el-table-column>

            <el-table-column width="80px" label="患者性别">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.patientSex">
                  <el-radio :label="item.value" :key="item.value" v-for="item in sexLabels">{{item.label}}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column min-width="80px" label="患者年龄">
              <template slot-scope="scope">
                <el-input v-model="scope.row.patientAge"></el-input>
              </template>
            </el-table-column>
            <el-table-column min-width="250px" label="患者身份证">
              <template slot-scope="scope">
                <el-input v-model="scope.row.patientPhone"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button type="primary" @click="sureAppointClick">保 存</el-button>
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script>
  import * as message from '@/constants/message';
  import { mapGetters, mapActions } from 'vuex';
  import AppointApi from "@/api/appoint/appoint";
  import AppointItemApi from "@/api/appoint/appointItem";

  export default {
    data () {
      return {
        sexLabels: [
          { label: "男", value: 1 },
          { label: "女", value: 2 }
        ],
        projectIdsLimit: 10,
        loadingIns: false,
        loadingCla: false,
        loadingUpload: false,
        fullscreenLoading: false,
        isCenter: true,
        disabled: false,
        uploadHeaders: {
          authorization: ''
        },
        dialogVisible: false,
        withCredentials: true,
        addOfficeForm: {
          hospitalId: '',
          officeName: ''
        },
        addDoctorForm: {
          hospitalId: '',
          officeId: '',
          doctorName: '',
          doctorTitle: ''
        },
        appointForm: {
          patientName: '',
          patientSex: '',
          patientAge: '',
          patientPhone: '',
          patientCard: '',
          patientInfo: '',
          itemId: '',
          itemList: [],
          institutionId: '',
          appointDate: '',
          remark: '',
          appointTime: ''
        },
        pickerBeginDateBefore:{
          disabledDate(time) {
            return time.getTime() < Date.now();
          }
        },
        pickClassifyList: [],
        classifyIdList: [],
        pickInstitutionList: [],
        appointItemList: [],
        selectItemList: [],
        timeDefaultShow:'',
        roleRules: {
          /*appointDate: [
            {
              required: true,
              message: '请输入预约时间段',
              trigger: 'blur'
            }
          ],
          appointTime: [
            {
              required: true,
              message: '请选择预约日期',
              trigger: 'change'
            }
          ],
          classifyIdList: [
            {
              required: true,
              message: '请选择项目分类',
              trigger: 'change'
            }
          ],*/
          patientName: [
            {
              required: true,
              message: '请输入患者姓名',
              trigger: 'blur'
            }
          ],
          patientPhone: [
            {
              required: true,
              message: '请输入患者电话',
              trigger: 'blur'
            }
          ],
          institutionId: [
            {
              required: true,
              message: '请选择医检机构',
              trigger: 'change'
            }
          ],
        }
      }
    },
    methods: {
      ...mapGetters({
        openTabs: 'getOpenTabs'
      }),
      ...mapActions({
        setOpenTabs: 'setOpenTabs',
        setActiveIndexPath: 'setActiveIndexPath',
        setDeleteTabs: 'setDeleteTabs',
        replaceOpenTab: 'replaceOpenTab'
      }),
      init () {
        this.$Utils.clearData(this.appointForm)
        this.listItemClassifyTree()
        //this.listInstitution()
      },
      sureAppointClick () {
        this.$refs.appointForm.validate(valid => {
          if (valid) {
            this.$confirm(
              message.MSG_CONFIRM_SAVE_ALTER,
              message.TITLE_PROMPT,
              {}
            ).then(() => {
              // add
              this.addAppoint()
            })
          }
        })
      },
      changeSelect(val){
        this.selectItemList = [];
        for (let i = 0; i < val.length; i ++){
          console.log(JSON.stringify(val[i]))
          if (!val[i].appointDate || !val[i].appointTime){
            this.$message({
              title: message.TITLE_ERROR,
              message: '请输入预约日期和时间段'
            })
            this.$refs.multipleTable.clearSelection();
            break;
          }
        }
        this.selectItemList = val;
      },
      listItemClassifyTree(query){
        let _this = this
        let cond = {
          classifyName: (!query || typeof query !== 'string') ? '' : query
        }
        AppointItemApi.listItemClassifyTree(cond)
          .then(res => {
            setTimeout(() => {
              _this.pickClassifyList = res.data
            }, 200)
          })
          .catch(error => {
            _this.pickClassifyList = []
            console.error(error)
          })
      },
      listInstitution () {
        let _this = this
        _this.loadingIns = true
        let cond = {
          classifyId: _this.classifyIdList[1]
          //institutionName: (!query || typeof query !== 'string') ? '' : query
        }
        AppointApi.appointInsSelect(cond)
          .then(res => {
            setTimeout(() => {
              _this.loadingIns = false
              _this.pickInstitutionList = res.data.map(item => {
                return {
                  value: item.institutionId,
                  label: item.institutionName
                }
              })
            }, 200)
          })
          .catch(error => {
            _this.pickInstitutionList = []
            console.error(error)
          })
      },
      classifyChange(){
        this.listInstitution()
      },
      institutionChange(){
        let _this = this
        _this.appointItemList = []
        let cond = {
          institutionId: _this.appointForm.institutionId,
          classifyId: _this.appointForm.classifyId
        }
        AppointApi.appointItemSelect(cond)
          .then(res => {
            _this.appointItemList = res.data;
          })
          .catch(error => {
            _this.appointItemList = []
            console.error(error)
          })
      },
      addAppoint () {
        let _this = this
        if (!_this.selectItemList || _this.selectItemList.length == 0){
          _this.$message({
            title: message.TITLE_ERROR,
            message: '请勾选预约项目'
          })
        }
        let appointFormData = {
          //itemId: _this.appointForm.itemId,
          itemList: _this.selectItemList,
          patientName: _this.appointForm.patientName,
          patientSex: _this.appointForm.patientSex,
          patientAge: _this.appointForm.patientAge,
          patientCard: _this.appointForm.patientCard,
          patientPhone: _this.appointForm.patientPhone,
          patientInfo: _this.appointForm.patientInfo,
          remark: _this.appointForm.remark,
          institutionId: _this.appointForm.institutionId
        }
        AppointApi.addAppoint(appointFormData)
          .then(data => {
            this.$notify.success({
              title: message.TITLE_SUCCESS,
              message: message.MSG_ACTION_SUCCESS
            })
            this.returnList()
          })
          .catch(error => {
            if (error.msg) {
              this.$notify.error({
                title: message.TITLE_ERROR,
                message: error.msg
              })
            }
          })
      },
      returnList () {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({ path:'/report/reportManagement'})
      }
    },
    mounted () {
      this.timeDefaultShow = new Date()
      this.appointForm.patientSex = 1
      this.init()
    }
  }
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
